---
layout: compress
---
{% include home.html %}

<!DOCTYPE html>
<html lang="en" itemscope itemtype="https://schema.org/WebPage" style="overflow-y: scroll;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="title" content="{{page.title}}">
    <meta name="og:title" content="{{page.title}}">
    <meta name="og:image" content="{{home}}/img/logo.png"/>

    {% if page.overview == nil %}
    <meta name="description" content="An open platform to connect, manage, and secure microservices.">
    <meta name="og:description" content="An open platform to connect, manage, and secure microservices.">
    {% else %}
    <meta name="description" content="{{page.overview}}">
    <meta name="og:description" content="{{page.overview}}">
    {% endif %}

    {% if page.title == 'Istio' %}
    <title>Istio</title>
    {% else %}
    <title>Istio / {{ page.title }}</title>
    {% endif %}

    <!-- Google Analytics -->
    <script>
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        ga('create', 'UA-98480406-1', 'auto');
        ga('send', 'pageview');
    </script>
    <script async src='https://www.google-analytics.com/analytics.js'></script>
    <!-- End Google Analytics -->

    <!-- RSS -->
    <link rel="alternate" type="application/rss+xml" title="Istio Blog RSS" href="{{home}}/feed.xml">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="{{home}}/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" type="image/png" href="{{home}}/favicons/android-chrome-96x96.png" sizes="96x96" >
    <link rel="icon" type="image/png" href="{{home}}/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="{{home}}/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="{{home}}/favicons/manifest.json">
    <link rel="mask-icon" href="{{home}}/favicons/safari-pinned-tab.svg" color="#2DA6B0">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="{{home}}/favicons/mstile-150x150.png">

    <!-- style sheets -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{home}}/css/all.css">
    <link rel="stylesheet" href="{{home}}/css/prism.css">

    <!-- jQuery - note that moving to version 3 and beyond of jquery causes the prism-related code in common.js to not execute
     properly, leading to rendering differences in code blocks -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  </head>

  <body class="language-unknown">
    <!-- this is a trick to avoid content shifting as the page loads. See https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page -->
    {{ content }}

    <!-- libraries we pull in -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- our own scripts -->
    <script src="{{home}}/js/common.js"></script>
    <script src="{{home}}/js/buttons.js"></script>
    <script src="{{home}}/js/search.js"></script>
    <script src="{{home}}/js/prism.js"></script>
  </body>
</html>
